<template>
  <el-container v-if="$route.name!='login'">
    <el-header>
      <div class="header">
        <span v-if="$route.name!='index'" class="el-icon-arrow-left back" @click="back()">返回</span>
        <span class="currentTime" v-if="$route.name=='index'"><img class="date_icon" src="../src/assets/image/date_icon.png" alt="">{{dataFormat(date)}}</span>
        <h2 v-if="$route.name!='index'">{{title}}</h2>
        <h2 v-else>法治云</h2>
        <img class="user_icon" src="../src/assets/image/home_header_icon_mine@2x.png" alt="">
      </div>
    </el-header>
    <el-main>
      <bgmusic ref="bgmusic"></bgmusic>
      <router-view>
      </router-view>
    </el-main>
    <el-footer v-if="$route.name=='index'">
      版权所有：法治堂文化（北京）有限公司
    </el-footer>
  </el-container>
  <div v-else class="loginContainer">
    <router-view>
    </router-view>
  </div>
</template>
<script>
import bgmusic from './components/bgmusic/bgmusic.vue'
export default {
  name: 'App',
  components: {
    bgmusic
  },
  data () {
    return {
      title: '法库智慧云端',
      date: new Date(),
      nowWeek: '',
      name: '学法考法测试',
    };
  },
  methods: {
    back: function () {
      this.$router.back()
    },
    dataFormat (time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
      * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
      * */
      let wk = date.getDay()
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let week = weeks[wk]
      // 拼接
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds + '  ' + week
    }
  },
  mounted () {
    this.$refs.bgmusic.showPlayer(false)
    let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date(); // 修改数据date
    }, 1000)

  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  watch: {
    $route: {
      handler (val) {
        if (val.query.title == '' || val.query.title == null) {
          this.title = '法治云'
        } else {
          this.title = val.query.title;
        }
      },
      deep: true,
    }
  },
}
</script>

